<template>
	<div class="place">
		<div class="place_son_box">
			<p>下单-待从购物车转订单</p>
		</div>
		<div class="place_table">
			<el-table :data="newcartList" style="width: 100%;" border>
				<el-table-column label="图片" width="100px">
					<template slot-scope="scope">
						<el-image
						    style="width:50px;height: 50px;"
							:src="`http://127.0.0.1/api/public/showimg/${scope.row.book.pic}`">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="book.name" label="商品名称">
				</el-table-column>
				<el-table-column prop="price" label="商品价钱">
				</el-table-column>
				<el-table-column prop="num" label="商品数量">
				</el-table-column>
				<el-table-column label="商品总价">
					<template slot-scope="scope">
						{{scope.row.num*scope.row.price}}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="notarize_box">
			<p>请确认完善收货人信息</p>
		</div>
		<div class="message_box" v-model="infoList">
			姓名：<el-input v-model="infoList.ship2name" style="width: 80%;margin-top:5px;"></el-input><br />
			电话：<el-input v-model="infoList.ship2phone" style="width: 80%;margin-top:5px;"></el-input><br />
			地址：<el-input v-model="infoList.ship2addr" style="width: 80%;margin-top:5px;"></el-input>
		</div>
		<div class="update_message_box">
			<div class="update_message_son_box1">
				<el-button @click="updateinfo()" style="height: 40px;background-color: #409eff;color: white;margin-top: 10px;">更新个人发货信息</el-button>
			</div>
			<div class="update_message_son_box2"></div>
			<div class="update_message_son_box3">
				<span style="height: 60px;line-height:60px;">总价</span>
				<span style="height: 60px;line-height:60px;margin-left: 10%;">￥{{sum}}</span>
				<el-button @click="placeOrder()" style="height: 40px;background-color: #f56c6c;color: white;margin-left: 10%;">下单</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'GoPlace',
		data(){
			return{
				newcartList:[],
				ordid:'',
				infoList:{
					ordid:'',
					ship2addr:"",
					ship2phone:"",
					ship2name:"",
					carts:[]
				},
				orderInformatin:[],
				order:0,
				amount:0,
			}
		},
		computed:{
			sum(){
				let sum=0;
				for(let item of this.newcartList){
					sum +=item.num*item.price;
				}
				return sum
			}
			
		},
		methods:{
			findinfo(){
				this.$get("/api/user/shipInfo")
				.then((resp)=>{
					this.infoList.ship2name=resp.data.data.name;
					this.infoList.ship2phone=resp.data.data.phone;
					this.infoList.ship2addr=resp.data.data.addr;
					this.infoList.carts=this.newcartList;
				})
			},
			updateinfo(){
				let fd=new FormData;
				fd.append("nickname",this.infoList.ship2name);
				fd.append("phone",this.infoList.ship2phone);
				fd.append("addr",this.infoList.ship2addr);
				this.$postf("/api/user/updateShip",fd)
				.then((resp)=>{
					this.infoList=resp.data.data;
				})
			},
			placeOrder(){
				console.log(this.infoList);
				this.$postj("/api/fore/cart/add2Order",this.infoList)
				.then((resp)=>{
					this.$message('下单成功');
					this.$router.push({
						path:'/pc/Payment?odid='+resp.data.data.ordid,
					})
				})
			}
		},
		mounted(){
			this.newcartList=this.$store.state.newcartList;
			this.user=this.$store.state.user;
			this.findinfo();
		}
		
	}
</script>

<style scoped>
	.place{
		width: 100%;
	}
	.place_son_box{
		width: 85%;
		height: 40px;
		margin: 0 auto; 
		margin-top:50px;
	}
	.place_son_box p{
		height: 40px;
		line-height:40px;
	}
	.place_table{
		width: 85%;
		margin: 0 auto; 
	}
	.notarize_box{
		width: 85%;
		height: 30px;
		margin: 0 auto;
		background-color: #dcdfe6;
	}
	.notarize_box p{
		height: 30px;
		line-height: 30px;
		color: #3f7fce;
		font-weight:800; 
		display: flex;
		margin-left:10px;
	}
	.message_box{
		width: 85%;
		height: 150px;
		margin: 0 auto;
		border-left:3px solid #add8e6;
	}
	.update_message_box{
		width: 85%;
		height: 60px;
		display: flex;
		margin: 0 auto;
		border-top:3px solid #add8e6;
		border-bottom:3px solid #add8e6;
		margin-top: 3px;
	}
	.update_message_son_box1{
		width: 25%;
		height: 60px;
	}
	.update_message_son_box2{
		width: 50%;
		height: 60px;
	}
	.update_message_son_box3{
		width: 25%;
		height: 60px;
	}
</style>